<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
    <title>KIPS | CONTENTS</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&amp;family=Poppins:wght@500&amp;display=swap" rel="stylesheet">
    <link charset="UTF-8" href="../css/common/common.css" rel="stylesheet">
    <link rel="icon" href="../img/icon.ico">

    <style>
        #contents {
            word-break: break-all;
            display: none;
        }
        
        .contents {
            margin-bottom: 2vmin;
        }
        
        #contents p.title {
            font-size: calc(1.6rem + 3vmin);
            margin: calc(24px + 2vmin) 4.4vmin;
        }
        
        #contents div:last-child {
            margin-bottom: 0;
        }
        
        #contents span {
            display: inline-block;
            width: 100%;
            position: relative;
            overflow: hidden;
            vertical-align: top;
        }
        
        #contents span img {
            vertical-align: bottom;
            width: 100%;
        }
        
        #contents span {
            background: #eee;
        }
        
        #contents a:nth-child(odd) span {
            background: #e2e2e2;
        }
        
        #contents span p {
            position: absolute;
            top: 50%;
            color: #aaa;
            transform: translateY(-50%);
            font-size: calc(0.8rem + 1.5vmin);
            padding: 20px;
            line-height: 1.8;
        }
        
        #contents span p.target {
            bottom: 0;
            top: auto;
            right: 0;
            left: auto;
            color: #fff;
            transform: none;
            font-size: calc(0.4rem + 0.5vmin);
            padding: 4px 5px;
            letter-spacing: 0.2rem;
            background-color: rgba(0, 0, 0, 0.6);
            line-height: unset;
            margin: 10px 10px;
        }
        
        #contents span p.loading {
            -webkit-animation: animLoading 0.15s ease-out infinite;
            animation: animLoading 0.15s ease-out infinite;
        }
        
        #contents span.blank p {
            color: #777;
        }
        
        #contents span.blank p.target {
            background-color: rgba(255, 255, 255, 0.6);
        }
        
        #contents a span.others {
            background: #333;
        }
        
        #contents span.others p {
            position: absolute;
            top: 50%;
            left: 5%;
            color: #fff;
            font-size: calc(1.5rem + 2vmin);
            transform: translateY(-50%);
        }
        
        @media (max-width: 600px) and (max-height: 900px) {
            #contents span {
                height: calc(32px + 36vmin);
            }
            #contents span img {
                top: 50%;
                transform: translateY(-50%);
                position: relative;
            }
        }
        
        @media (min-width: 600px) {
            #contents span {
                width: calc(100%/2);
            }
        }
        
        @media (min-width: 1000px) {
            #contents span {
                width: calc(100%/3);
            }
        }
        
        @media (min-width: 1400px) {
            #contents span {
                width: calc(100%/4);
            }
        }
        
        @media (min-width: 1800px) {
            #contents span {
                width: calc(100%/5);
            }
        }
        
        @-webkit-keyframes animLoading {
            0% {
                opacity: 0.2;
            }
            100% {
                opacity: 1.0;
            }
        }
        
        @keyframes animLoading {
            0% {
                opacity: 0.2;
            }
            100% {
                opacity: 1.0;
            }
        }
        
        .contents a {
            /* background-color: red; */
            margin-right: -15px;
        }
    </style>
    <script async="" src="https://www.google-analytics.com/analytics.js"></script>
    <script src="../js/jquery/jquery.min.js" defer=""></script>
    <script src="../js/common/common.js"></script>
</head>

<body id="kips" class="kipssub">
    <div id="contents" style="display: block;">
        <p class="title">WEB</p>
        <div class="contents">
            <a href="../rift/">
                <span>
                    <img src="../img/fra_miku.gif"><p class="loading" style="display: none;">MIKUMV</p>
                </span>
            </a>
            <!-- <a href="../canvas-test-gh-pages/src/Funny-demo/lowpoly/">
                <span>
                    <img src="../img/fra_miku.gif"><p class="loading" style="display: none;">MIKUMV</p>
                </span>
            </a> -->
        </div>
    </div>
    <div id="bt_menu"><img src="../img/menu.png"></div>
    <div id="menu">
        <h1><a href="../">KIPS</a></h1>
        <h2>kipkips official website</h2>
        <p><a href="../news/">NEWS</a></p>
        <p class="none">CONTENTS</p>
        <p><a href="../sound/">SOUND</a></p>
        <p><a href="../about/">ABOUT</a></p>
        <p class="spa"><a href="https://github.com/KIPKIPS" target="_blank">GITHUB</a></p>
    </div>
    <div id="loading" style="display: none;">
        <p></p>
    </div>
</body>

</html>